<template>
  <div style="margin: 20px 0">
    <!-- 危险源风险统计图 -->
    <div
      :id="statisticResult?.unitid ? 'identify-chart' : 'statistic-chart'"
      style="width: 100%; height: 50vh; min-height: 300px; min-width: 800px"
    >
    </div>
    <div style="display: flex; justify-content: space-around">
      <a-card
        title="危险源级别统计"
        :bordered="true"
        style="width: 400px; height: 200px; margin-top: 20px"
      >
        <a-row>
          <a-col :span="12">
            <a-statistic
              title="一般危险源数量"
              :value="statisticResult?.general1 ?? 0"
              style="margin-right: 50px"
            />
          </a-col>
          <a-col :span="12">
            <a-statistic
              title="重大危险源数量"
              :valueStyle="{ color: 'red' }"
              :value="statisticResult?.major1 ?? 0"
            />
          </a-col>
        </a-row>
      </a-card>
      <a-card
        title="隐患级别统计"
        :bordered="true"
        style="width: 400px; height: 200px; margin-top: 20px"
      >
        <a-row>
          <a-col :span="12">
            <a-statistic
              title="一般隐患数量"
              :value="statisticResult?.general2 ?? 0"
              style="margin-right: 50px"
            />
          </a-col>
          <a-col :span="12">
            <a-statistic
              title="重大隐患数量"
              :valueStyle="{ color: 'red' }"
              :value="statisticResult?.major2 ?? 0"
            />
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  export default defineComponent({
    props: ['statisticResult'],
    setup(props, { emit }) {
      const option = ref({});
      var chartDom;
      var myChart;
      watch(
        () => props.statisticResult,
        (newVal) => {
          if (newVal) {
            option.value.series = [
              {
                name: '危险源风险统计',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: newVal.level11 ?? 0, name: '低风险' },
                  { value: newVal.level12 ?? 0, name: '一般风险' },
                  { value: newVal.level13 ?? 0, name: '较大风险' },
                  { value: newVal.level14 ?? 0, name: '重大风险' },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
              {
                name: '隐患级别统计',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: newVal.general2 ?? 0, name: '一般危险源' },
                  { value: newVal.major2 ?? 0, name: '重大危险源' },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
              // {
              //   name: '隐患风险统计',
              //   type: 'pie',
              //   radius: '50%',
              //   data: [
              //     { value: newVal.level21 ?? 0, name: '低风险' },
              //     { value: newVal.level22 ?? 0, name: '一般风险' },
              //     { value: newVal.level23 ?? 0, name: '较大风险' },
              //     { value: newVal.level24 ?? 0, name: '重大风险' },
              //   ],
              //   emphasis: {
              //     itemStyle: {
              //       shadowBlur: 10,
              //       shadowOffsetX: 0,
              //       shadowColor: 'rgba(0, 0, 0, 0.5)',
              //     },
              //   },
              // },
            ];
            option.value && myChart.setOption(option.value);
          }
        },
      );
      onMounted(() => {
        // 因为多个地方都会引用,所以要赋予不同的id,这样的话他们之间就不会互相影响
        chartDom = document.getElementById(
          props.statisticResult?.unitid ? 'identify-chart' : 'statistic-chart',
        );
        myChart = echarts.init(chartDom);
        if (props.statisticResult) {
          option.value = {
            title: [
              {
                text: '危险源风险等级统计',
                left: '25%',
                textAlign: 'center',
              },
              {
                text: '隐患级别统计',
                left: '75%',
                textAlign: 'center',
              },
              // {
              //   text: '隐患风险等级统计',
              //   left: '75%',
              //   textAlign: 'center',
              // },
            ],
            tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)',
            },
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            color: ['#88C6FF', '#FFE35B', '#FF974C', '#FF4040', '#3B5999', '#CD201F'],
            series: [
              {
                name: '危险源统计',
                type: 'pie',
                radius: '50%',
                center: ['25%', '50%'],
                data: [
                  { value: props.statisticResult?.level11 ?? 0, name: '低风险' },
                  { value: props.statisticResult?.level12 ?? 0, name: '一般风险' },
                  { value: props.statisticResult?.level13 ?? 0, name: '较大风险' },
                  { value: props.statisticResult?.level14 ?? 0, name: '重大风险' },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
              {
                name: '隐患级别统计',
                type: 'pie',
                radius: '50%',
                center: ['75%', '50%'],
                data: [
                  { value: props.statisticResult?.general2 ?? 0, name: '一般危险源' },
                  { value: props.statisticResult?.major2 ?? 0, name: '重大危险源' },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
              // {
              //   name: '隐患统计',
              //   type: 'pie',
              //   radius: '50%',
              //   center: ['75%', '50%'],
              //   data: [
              //     { value: props.statisticResult?.level21 ?? 0, name: '低风险' },
              //     { value: props.statisticResult?.level22 ?? 0, name: '一般风险' },
              //     { value: props.statisticResult?.level23 ?? 0, name: '较大风险' },
              //     { value: props.statisticResult?.level24 ?? 0, name: '重大风险' },
              //   ],
              //   emphasis: {
              //     itemStyle: {
              //       shadowBlur: 10,
              //       shadowOffsetX: 0,
              //       shadowColor: 'rgba(0, 0, 0, 0.5)',
              //     },
              //   },
              // },
            ],
          };
          option.value && myChart.setOption(option.value);
        }

        window.onresize = function () {
          myChart.resize();
        };
      });
      return {};
    },
  });
</script>

<style scoped></style>
